<template>
     <div>
		 <el-table :data="tableData.records">
			<el-table-column label="门店名称" prop="name"></el-table-column>
			<el-table-column label="门店地址" prop="address"></el-table-column>
			<el-table-column label="开门时间" prop="openTime"></el-table-column>
			<el-table-column label="休息时间" prop="closeTime"></el-table-column>
			 <el-table-column label="状态">
				<template #default = "scope">
					<el-tag type="success" v-if="scope.row.status ">正常营业</el-tag>
					<el-tag type="danger" v-else >暂停营业</el-tag>
				</template>
			 </el-table-column>
			<el-table-column label="操作" width="310px">
				<template #default = "scope">
					<template v-if="scope.row.status" >
						<el-button type="danger" plain size="small" @click="del(scope.row.id,0)">暂停服务</el-button>
						<el-button type="success" plain size="small" @click="cateList(scope.row.id)">商品分配</el-button>
					</template>
					<el-button v-else type="warning" plain size="small" @click="del(scope.row.id,1)">启用</el-button>
				</template>
			</el-table-column>	
		</el-table>
		 		<el-pagination style="margin-top: 10px;" background 
		 		v-model:current-page = "params.PageNo" :page-count = "tableData.pages" :total="tableData.total"
		 		@current-change = "getTableData"/>
		<el-dialog
		   v-model="cateDialog.show"
					width="700px"
					title="商品列表"
					:close-on-click-modal = "false">
					<Cate
					v-if="cateDialog.show"
					v-model:show="cateDialog.show"
					:storesId="cateDialog.storesId"
					 />
		</el-dialog>		
	 </div>

		
</template>

<script setup>
import { Avatar } from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'
import Cate from "./cate"

const dialog = reactive({
	show: false,
	title: '',
	id: null
})

const cateDialog = reactive({
	show: false,
	storesId: null
})
const tableData = reactive({
	records: [],
	pages: 0,
	total: 0
})
const params = reactive({
	PageNo: 1,
	PageSize: 13
})

function add(){
	dialog.id = null
	dialog.title = "添加门店信息"
	dialog.show = true
}
function update(id){
	dialog.id = id
	dialog.title = "修改门店信息"
	dialog.show = true
}

function del(id,status) {
	const text = status ? '确定要启用该门店吗' : '确定要禁用该门店吗';
	ElMessageBox.confirm(text,'警告',{
		 type: 'warning'
	}).then(() => {
		post(url.del,{id,status}, content => {
			getTableData()
			console.dir("AAAAAAAAAAAAAAAAAAAA")
		})
	}).catch(() => {})
}


function getTableData(){
	get(url.list,params,content => {
		tableData.records = content.records
		tableData.pages = content.pages
		tableData.total = content.total 
		 console.dir(content)
	})
}
function cateList(storesId){
	cateDialog.storesId = storesId
	cateDialog.show = true
}
getTableData()
</script>

<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.span{
			font-size: 14px;
			margin-left: 20px;
		}
	}

}
</style>